 |
| |
| Once you
learn to write clean code (as shown in Drew's article, "Tableless
Layouts with Dreamweaver MX"), myriad styling choices
emerge. There are additional benefits of this "cleanliness."
For instance, many designers don't know that using valid code
makes their pages more accessible, which gives people equal
access to their information. Due to the increasing number of
people on the web, the importance of accessibility has come to
the forefront. In fact, many governments now legislate it.
(Read more about the W3C's Web Accessibility Initiative.) |
| |
| Here's the
bottom line. Once you separate structure from presentation you
gain the ability to create an accessible pageusing valid,
well-structured HTML code to make it work and using CSS to
make it appealing. CSS controls the appearance of your layout
and reduces the file size. This is simplicity at its
best. |
| |
| So how the
heck do you accomplish this? Glad you asked. Because we're
taking off from where Drew's article ends, take a moment first
to complete
his tutorial. If you've already finished it but didn't
save your workor you're already an expert at tableless design
and you don't need any helpdownload his article's completed
files (8K download), which we'll be starting with
here. |
| |
| Document
types, CSS selectors, and attaching the CSS sheet to your page
have been covered, so we won't be redundant. We'll start by
describing styling changes that can take your page from plain
vanilla to spicy and tasteful. |
| |
| To see how
this all looks in the end, check out how our final page
lookswith and without the style sheet attached (see Figure
1). Amazingly enough, that's the only difference. Layout is
determined by the style sheet, nothing else. |
| |
 |
|
 |
| Figure 1. Click on each image to
see how the same final web page looks in your browser, with
the style sheet attached (left) and without the style sheet
attached (right). |
| |
| CSS rules can
seem tricky at first but if you commit them to memory, your
CSS days will be a breeze. Because you probably haven't
memorized them just yet, take a moment to read this TechNote,
"An
Overview of Cascading Style Sheets." |
| |
|
| |
|
|
|
|
|
|
.gif){kind=tracking}
